<script>
  import bmdForm from '@/components/DmbForm'
  import { formBase, itemStyle, tableBase, tableFormStyle, cellStyle, headerCellStyle } from './config'
  import dmbTable from '@/components/LTable'
  import { collectionApi, setDestinationApi } from '@/api/order/deliveryOrder'
  import { getDestionListApi } from '@/api/data/destination-maintenance'

  export default {
    name: 'deliveryOrder',
    computed: {
      itemStyle() {
        return itemStyle
      },
      colLayout() {
        return {
          xl: 3, // >1920px 4个
          lg: 4,
          md: 6,
          sm: 8,
          xs: 10
        }
      },
      tableFormStyle() {
        return tableFormStyle
      },
      headerCellStyle() {
        return headerCellStyle
      },
      cellStyle() {
        return cellStyle
      }
    },
    data() {
      return {
        FormData: {},
        requestConfig: {
          url: '/order/delivery/deliveryList',
          method: 'post',
          montage: false
        },
        code: {
          field: 'courierNumber',
          value: ''
        },
        time: {
          field: '下单时间',
          value: ''
        },
        reciver: {
          field: '收货人',
          value: ''
        },
        selectionArr: [],
        destionArr: [], // 自提点列表
        destion: '' // 当前选择自提点
      }
    },
    components: { bmdForm, dmbTable },
    async mounted() {
      const res = await getDestionListApi()
      console.log(res)
      this.destionArr = res.rows
    },
    methods: {
      formBase() {
        return formBase
      },
      tableBase() {
        return tableBase
      },
      // 失去焦点
      inpBlur(target) {
        const { value } = target.target
        this.FormData[this.fieldSelect] = value
      },
      // select的select框内容改变事件
      codeSelectChange(value) {
        const arr = ['courierNumber', 'transitOrderNo']
        arr.forEach(item => {
          if(item !== value && this.FormData[item] !== undefined) {
            delete this.FormData[item]
          }
        })
        this.FormData[value] = this.fieldInput
      },
      // 时间选择器发生改变
      timeSelectChange(value) {
        const arr = ['courierNumber', 'transitOrderNo']
        arr.forEach(item => {
          if(item !== value && this.FormData[item] !== undefined) {
            delete this.FormData[item]
          }
        })
        this.FormData[value] = this.fieldInput
      },
      // 收货选择器发生改变
      reciverSelectChange(value) {
        const arr = ['courierNumber', 'transitOrderNo']
        arr.forEach(item => {
          if(item !== value && this.FormData[item] !== undefined) {
            delete this.FormData[item]
          }
        })
        this.FormData[value] = this.fieldInput
      },
      // 导出
      downLoad() {
        if (this.selectionArr.length > 0) {
          // 查找快递公司
          const data = this.selectionArr.map(item => { return item.orderId })
          this.download('/order/delivery/export', { ids: data }, `deliveryOrder_${new Date().getTime()}.xlsx`)
        } else {
          this.$message.error('请选择条数据导出')
        }
      },
      // 支付状态改变接口
      payChange(value) {
        setTimeout(() => {
          collectionApi(value.orderId).then(res => {
            this.$message.success('打款成功!')
          }).catch(() => {
            value.payStatus = !value.payStatus
            this.$message.error('打款失败!')
          })
        }, 500)
      },
      // 修改自提点
      modifySelf() {
        if(this.selectionArr.length > 0) {
          if(this.destion !== '') {
            this.$confirm('确认修改自提点?', '审核', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.selectionArr.forEach(item => {
                setTimeout(async () => {
                  await setDestinationApi({ orderId: item.orderId, pickupId: this.destion })
                }, 500)
              })
            })
          } else {
            this.$message.error('右侧的自提点, 不可为空!')
          }
        } else {
          this.$message.error('请选择至少一条的数据!')
        }
      }
    }
  }
</script>

<template>
  <div>
    <div class="flex">
      <div class="flex-1">
        <bmdForm
          :model-value="FormData"
          :form-items="formBase()"
          labelWidth="85px"
          label-position="top"
          :item-style="itemStyle"
          :colLayout="colLayout"
          @update="(row) => FormData = row"
        />
      </div>
      <div class="flex flex-col pt-3 ml-3 gap-3">
        <div>
          <el-input placeholder="请输入内容" v-model="code.value" @blur="inpBlur">
            <el-select v-model="code.field" slot="prepend" placeholder="请选择" class="min-w-[120px]" @change="codeSelectChange">
              <el-option label="快递单号" value="courierNumber" />
              <el-option label="转运单号" value="transitOrderNo" />
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="$refs.table.getListData()" />
          </el-input>
        </div>
        <div>
          <el-input placeholder="请输入内容" v-model="reciver.value" @blur="inpBlur">
            <el-select v-model="reciver.field" slot="prepend" placeholder="请选择" class="min-w-[120px]" @change="reciverSelectChange">
              <el-option label="快递单号" value="courierNumber" />
              <el-option label="转运单号" value="transitOrderNo" />
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="$refs.table.getListData()" />
          </el-input>
        </div>
        <div class="flex">
          <el-select v-model="time.field" placeholder="请选择" class="w-[120px] mr-3" @change="timeSelectChange">
            <el-option label="下单时间" value="下单时间" />
            <el-option label="审单时间" value="审单时间" />
            <el-option label="打单时间" value="打单时间" />
          </el-select>
          <el-date-picker
            v-model="time.value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="flex-1"
          />
        </div>
        <div class="flex">
          <el-select v-model="destion" placeholder="请选择自提点" clearable class="min-w-[120px] mr-3">
            <el-option
              v-for="(item, index) in destionArr"
              :key="index"
              :label="item.destination"
              :value="item.id"
            />
          </el-select>
          <el-button type="primary" @click="downLoad">导出</el-button>
          <el-button type="success" @click="modifySelf">修改自提点</el-button>
        </div>
      </div>
    </div>
    <div class="pt-3">
      <dmbTable
        ref="table"
        :prop-list="tableBase()"
        :is-operate="true"
        :props-search-form="FormData"
        :req-request="requestConfig"
        select-key="orderId"
        findType="findPage"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
        :initialize="false"
        :change-search-form="false"
        :show-footer="true"
        :form-item-style="tableFormStyle"
        @selectionChange="(row) => { selectionArr = row }"
      >
        <template v-slot:title="{ row }">
          <div class="h-[50px] flex gap-5 items-center flex-row-reverse text-center">
            <div>
              <div>应收费用</div>
              <div class="text-[#FF00FD]">{{ row.totalDueFee || 0 }}</div>
            </div>
            <div>
              <div>保价运费</div>
              <div class="text-[#4B0082]">{{ row.totalShippingFee || 0 }}</div>
            </div>
            <div>
              <div>殿付费</div>
              <div class="text-[#A9CD7A]">{{ row.totalAdvancePaymentFee || 0 }}</div>
            </div>
            <div>
              <div>贷款手续费</div>
              <div class="text-[#FFA500]">{{ row.totalPaymentServiceFee || 0 }}</div>
            </div>
            <div>
              <div>贷款</div>
              <div class="text-[#3CB371]">{{ row.totalPaymentServiceFee || 0 }}</div>
            </div>
            <div>
              <div>出库包</div>
              <div class="text-[#FA95B6]">{{ row.bagCountTotal || 0 }}</div>
            </div>
            <div>
              <div>票数</div>
              <div class="text-[red]">{{ row.total || 0 }}</div>
            </div>
            <div>
              <div>件数</div>
              <div class="text-[green]">{{ row.totalPackageCount || 0 }}</div>
            </div>
            <div>
              <div>未打单</div>
              <div class="text-[#953800]">{{ row.unPrint || 0 }}</div>
            </div>
            <div>
              <div>已打单</div>
              <div class="text-[#387F00]">{{ row.print || 0 }}</div>
            </div>
            <div>
              <div>未收款</div>
              <div class="text-[blue]">{{ row.unPay || 0 }}</div>
            </div>
            <div>
              <div>未审单</div>
              <div class="text-[pink]">{{ row.unCheck || 0 }}</div>
            </div>
            <div>
              <div>重量</div>
              <div class="text-[#ccc]">{{ row.totalActualWeight || 0 }}</div>
            </div>
          </div>
        </template>
        <template v-slot:payStatus="{ row }">
          <el-switch
            v-model="row.payStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :disabled="row.payStatus === 1"
            active-text="是"
            :inactive-value="0"
            inactive-text="否"
            @change="payChange(row)"
          />
        </template>
      </dmbTable>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
